:root.light {
  #{getCssVarName(amber, 0)}: 254, 251, 235;
  #{getCssVarName(amber, 1)}: 252, 245, 206;
  #{getCssVarName(amber, 2)}: 249, 232, 158;
  #{getCssVarName(amber, 3)}: 246, 216, 111;
  #{getCssVarName(amber, 4)}: 243, 198, 65;
  #{getCssVarName(amber, 5)}: 240, 177, 20;
  #{getCssVarName(amber, 6)}: 200, 138, 15;
  #{getCssVarName(amber, 7)}: 160, 102, 10;
  #{getCssVarName(amber, 8)}: 120, 70, 6;
  #{getCssVarName(amber, 9)}: 80, 43, 3;

  // 蓝色
  #{getCssVarName(blue, 0)}: 234, 245, 255;
  #{getCssVarName(blue, 1)}: 203, 231, 254;
  #{getCssVarName(blue, 2)}: 152, 205, 253;
  #{getCssVarName(blue, 3)}: 101, 178, 252;
  #{getCssVarName(blue, 4)}: 50, 149, 251;
  #{getCssVarName(blue, 5)}: 0, 119, 250;
  #{getCssVarName(blue, 6)}: 0, 98, 214;
  #{getCssVarName(blue, 7)}: 0, 79, 179;
  #{getCssVarName(blue, 8)}: 0, 61, 143;
  #{getCssVarName(blue, 9)}: 0, 44, 107;

  // 青色
  #{getCssVarName(cyan, 0)}: 229, 247, 248;
  #{getCssVarName(cyan, 1)}: 194, 239, 240;
  #{getCssVarName(cyan, 2)}: 138, 221, 226;
  #{getCssVarName(cyan, 3)}: 88, 203, 211;
  #{getCssVarName(cyan, 4)}: 44, 184, 197;
  #{getCssVarName(cyan, 5)}: 5, 164, 182;
  #{getCssVarName(cyan, 6)}: 3, 134, 152;
  #{getCssVarName(cyan, 7)}: 1, 105, 121;
  #{getCssVarName(cyan, 8)}: 0, 77, 91;
  #{getCssVarName(cyan, 9)}: 0, 50, 61;

  // 绿色
  #{getCssVarName(green, 0)}: 236, 247, 236;
  #{getCssVarName(green, 1)}: 208, 240, 209;
  #{getCssVarName(green, 2)}: 164, 224, 167;
  #{getCssVarName(green, 3)}: 125, 209, 130;
  #{getCssVarName(green, 4)}: 90, 194, 98;
  #{getCssVarName(green, 5)}: 59, 179, 70;
  #{getCssVarName(green, 6)}: 48, 149, 59;
  #{getCssVarName(green, 7)}: 37, 119, 47;
  #{getCssVarName(green, 8)}: 27, 89, 36;
  #{getCssVarName(green, 9)}: 17, 60, 24;

  // 灰色
  #{getCssVarName(grey, 0)}: 249, 249, 249;
  #{getCssVarName(grey, 1)}: 230, 232, 234;
  #{getCssVarName(grey, 2)}: 198, 202, 205;
  #{getCssVarName(grey, 3)}: 167, 171, 176;
  #{getCssVarName(grey, 4)}: 136, 141, 146;
  #{getCssVarName(grey, 5)}: 107, 112, 117;
  #{getCssVarName(grey, 6)}: 85, 91, 97;
  #{getCssVarName(grey, 7)}: 65, 70, 76;
  #{getCssVarName(grey, 8)}: 46, 50, 56;
  #{getCssVarName(grey, 9)}: 28, 31, 35;

  // 靛蓝
  #{getCssVarName(indigo, 0)}: 236, 239, 248;
  #{getCssVarName(indigo, 1)}: 209, 216, 240;
  #{getCssVarName(indigo, 2)}: 167, 179, 225;
  #{getCssVarName(indigo, 3)}: 128, 144, 211;
  #{getCssVarName(indigo, 4)}: 94, 111, 196;
  #{getCssVarName(indigo, 5)}: 63, 81, 181;
  #{getCssVarName(indigo, 6)}: 51, 66, 161;
  #{getCssVarName(indigo, 7)}: 40, 52, 140;
  #{getCssVarName(indigo, 8)}: 31, 40, 120;
  #{getCssVarName(indigo, 9)}: 23, 29, 99;

  // 浅蓝色
  #{getCssVarName(light, blue)}-0: 233, 247, 253;
  #{getCssVarName(light, blue)}-1: 201, 236, 252;
  #{getCssVarName(light, blue)}-2: 149, 216, 248;
  #{getCssVarName(light, blue)}-3: 98, 195, 245;
  #{getCssVarName(light, blue)}-4: 48, 172, 241;
  #{getCssVarName(light, blue)}-5: 0, 149, 238;
  #{getCssVarName(light, blue)}-6: 0, 123, 202;
  #{getCssVarName(light, blue)}-7: 0, 99, 167;
  #{getCssVarName(light, blue)}-8: 0, 75, 131;
  #{getCssVarName(light, blue)}-9: 0, 53, 95;

  // 浅绿色
  #{getCssVarName(light, green)}-0: 243, 248, 236;
  #{getCssVarName(light, green)}-1: 227, 240, 208;
  #{getCssVarName(light, green)}-2: 200, 226, 165;
  #{getCssVarName(light, green)}-3: 173, 211, 126;
  #{getCssVarName(light, green)}-4: 147, 197, 91;
  #{getCssVarName(light, green)}-5: 123, 182, 60;
  #{getCssVarName(light, green)}-6: 100, 152, 48;
  #{getCssVarName(light, green)}-7: 78, 121, 38;
  #{getCssVarName(light, green)}-8: 57, 91, 27;
  #{getCssVarName(light, green)}-9: 37, 61, 18;

  // 清柠色
  #{getCssVarName(lime, 0)}: 242, 250, 230;
  #{getCssVarName(lime, 1)}: 227, 246, 197;
  #{getCssVarName(lime, 2)}: 203, 237, 142;
  #{getCssVarName(lime, 3)}: 183, 227, 91;
  #{getCssVarName(lime, 4)}: 167, 218, 44;
  #{getCssVarName(lime, 5)}: 155, 209, 0;
  #{getCssVarName(lime, 6)}: 126, 174, 0;
  #{getCssVarName(lime, 7)}: 99, 139, 0;
  #{getCssVarName(lime, 8)}: 72, 104, 0;
  #{getCssVarName(lime, 9)}: 47, 70, 0;

  // 橙色
  #{getCssVarName(orange, 0)}: 255, 248, 234;
  #{getCssVarName(orange, 1)}: 254, 238, 204;
  #{getCssVarName(orange, 2)}: 254, 217, 152;
  #{getCssVarName(orange, 3)}: 253, 193, 101;
  #{getCssVarName(orange, 4)}: 253, 166, 51;
  #{getCssVarName(orange, 5)}: 252, 136, 0;
  #{getCssVarName(orange, 6)}: 210, 103, 0;
  #{getCssVarName(orange, 7)}: 168, 74, 0;
  #{getCssVarName(orange, 8)}: 126, 49, 0;
  #{getCssVarName(orange, 9)}: 84, 29, 0;

  // 粉色
  #{getCssVarName(pink, 0)}: 253, 236, 239;
  #{getCssVarName(pink, 1)}: 251, 207, 216;
  #{getCssVarName(pink, 2)}: 246, 160, 181;
  #{getCssVarName(pink, 3)}: 242, 115, 150;
  #{getCssVarName(pink, 4)}: 237, 72, 123;
  #{getCssVarName(pink, 5)}: 233, 30, 99;
  #{getCssVarName(pink, 6)}: 197, 19, 86;
  #{getCssVarName(pink, 7)}: 162, 11, 72;
  #{getCssVarName(pink, 8)}: 126, 5, 58;
  #{getCssVarName(pink, 9)}: 90, 1, 43;

  // 紫色
  #{getCssVarName(purple, 0)}: 247, 233, 247;
  #{getCssVarName(purple, 1)}: 239, 202, 240;
  #{getCssVarName(purple, 2)}: 221, 155, 224;
  #{getCssVarName(purple, 3)}: 201, 111, 209;
  #{getCssVarName(purple, 4)}: 180, 73, 194;
  #{getCssVarName(purple, 5)}: 158, 40, 179;
  #{getCssVarName(purple, 6)}: 135, 30, 158;
  #{getCssVarName(purple, 7)}: 113, 22, 138;
  #{getCssVarName(purple, 8)}: 92, 15, 117;
  #{getCssVarName(purple, 9)}: 73, 10, 97;

  // 红色
  #{getCssVarName(red, 0)}: 254, 242, 237;
  #{getCssVarName(red, 1)}: 254, 221, 210;
  #{getCssVarName(red, 2)}: 253, 183, 165;
  #{getCssVarName(red, 3)}: 251, 144, 120;
  #{getCssVarName(red, 4)}: 250, 102, 76;
  #{getCssVarName(red, 5)}: 249, 57, 32;
  #{getCssVarName(red, 6)}: 213, 37, 21;
  #{getCssVarName(red, 7)}: 178, 20, 12;
  #{getCssVarName(red, 8)}: 142, 8, 5;
  #{getCssVarName(red, 9)}: 106, 1, 3;

  // 蓝绿色
  #{getCssVarName(teal, 0)}: 228, 247, 244;
  #{getCssVarName(teal, 1)}: 192, 240, 232;
  #{getCssVarName(teal, 2)}: 135, 224, 211;
  #{getCssVarName(teal, 3)}: 84, 209, 193;
  #{getCssVarName(teal, 4)}: 39, 194, 176;
  #{getCssVarName(teal, 5)}: 0, 179, 161;
  #{getCssVarName(teal, 6)}: 0, 149, 137;
  #{getCssVarName(teal, 7)}: 0, 119, 111;
  #{getCssVarName(teal, 8)}: 0, 89, 85;
  #{getCssVarName(teal, 9)}: 0, 60, 58;

  // 紫罗兰色
  #{getCssVarName(violet, 0)}: 243, 237, 249;
  #{getCssVarName(violet, 1)}: 226, 209, 244;
  #{getCssVarName(violet, 2)}: 196, 167, 233;
  #{getCssVarName(violet, 3)}: 166, 127, 221;
  #{getCssVarName(violet, 4)}: 136, 91, 210;
  #{getCssVarName(violet, 5)}: 106, 58, 199;
  #{getCssVarName(violet, 6)}: 87, 47, 179;
  #{getCssVarName(violet, 7)}: 70, 37, 158;
  #{getCssVarName(violet, 8)}: 54, 28, 138;
  #{getCssVarName(violet, 9)}: 40, 20, 117;

  // 黄色
  #{getCssVarName(yellow, 0)}: 255, 253, 234;
  #{getCssVarName(yellow, 1)}: 254, 251, 203;
  #{getCssVarName(yellow, 2)}: 253, 243, 152;
  #{getCssVarName(yellow, 3)}: 252, 232, 101;
  #{getCssVarName(yellow, 4)}: 251, 218, 50;
  #{getCssVarName(yellow, 5)}: 250, 200, 0;
  #{getCssVarName(yellow, 6)}: 208, 170, 0;
  #{getCssVarName(yellow, 7)}: 167, 139, 0;
  #{getCssVarName(yellow, 8)}: 125, 106, 0;
  #{getCssVarName(yellow, 9)}: 83, 72, 0;

  // 黑、白色
  #{getCssVarName(white)}: 255, 255, 255;
  #{getCssVarName(black)}: 0, 0, 0;

  // 功能色
  #{getCssVarName(color, white)}: rgba(var(#{getCssVarName(white)}),1); // 浅色模式下深色背景内容Inverse
  #{getCssVarName(color, black)}: rgba(var(#{getCssVarName(black)}),1); // 深色模式下浅色背景内容Inverse

  // 主要颜色
  #{getCssVarName(color, primary)}: rgba(var(#{getCssVarName(blue, 5)}),1); // 主要颜色。仅在需要非常强调的情况下使用。
  #{getCssVarName(color, primary, text)}: rgba(var(#{getCssVarName(white)}), 1); // 主要颜色文字色，和背景色形成对比
  #{getCssVarName(color, primary, hover)}: rgba(var(#{getCssVarName(blue, 6)}),1); // 主要颜色悬浮态
  #{getCssVarName(color, primary, hover, text)}: rgba(var(#{getCssVarName(white)}), 1); // 主要颜色文字色，和背景色形成对比
  #{getCssVarName(color, primary, active)}: rgba(var(#{getCssVarName(blue, 7)}),1); // 主要颜色激活态
  #{getCssVarName(color, primary, active, text)}: rgba(var(#{getCssVarName(white)}), 1); // 主要颜色文字色，和背景色形成对比
  #{getCssVarName(color, primary, disabled)}: rgba(var(#{getCssVarName(blue, 2)}),1); // 主要颜色禁用态
  #{getCssVarName(color, primary, disabled, text)}: rgba(var(#{getCssVarName(white)}), 1); // 主要颜色文字色，和背景色形成对比
  #{getCssVarName(color, primary, light, default)}: rgba(var(#{getCssVarName(blue, 0)}),1); // 浅版主要颜色（多用于背景）。仅在需要非常强调的情况下使用。
  #{getCssVarName(color, primary, light, hover)}: rgba(var(#{getCssVarName(blue, 1)}),1); // 浅版主要颜色悬浮态
  #{getCssVarName(color, primary, light, active)}: rgba(var(#{getCssVarName(blue, 2)}),1); // 浅版主要颜色激活态

  // 次要颜色
  #{getCssVarName(color, secondary)}: rgba(var(#{getCssVarName(light, blue, 5)}),1); // 次要颜色。强调作用次于主要颜色，但仍然具有强调作用。
  #{getCssVarName(color, secondary, text)}: rgba(var(#{getCssVarName(white)}), 1); // 次要颜色文字色，和背景色形成对比
  #{getCssVarName(color, secondary, hover)}: rgba(var(#{getCssVarName(light, blue, 6)}),1); // 次要颜色悬浮态
  #{getCssVarName(color, secondary, hover, text)}: rgba(var(#{getCssVarName(white)}), 1); // 次要颜色文字色，和背景色形成对比
  #{getCssVarName(color, secondary, active)}: rgba(var(#{getCssVarName(light, blue, 7)}),1); // 次要颜色激活态
  #{getCssVarName(color, secondary, active, text)}: rgba(var(#{getCssVarName(white)}), 1); // 次要颜色文字色，和背景色形成对比
  #{getCssVarName(color, secondary, disabled)}: rgba(var(#{getCssVarName(light, blue, 2)}),1); // 次要颜色禁用态
  #{getCssVarName(color, secondary, disabled, text)}: rgba(var(#{getCssVarName(white)}), 1); // 次要颜色文字色，和背景色形成对比
  #{getCssVarName(color, secondary, light, default)}: rgba(var(#{getCssVarName(light, blue, 0)}),1); // 浅版次要颜色（多用于背景）。强调作用次于主要颜色，但仍然具有强调作用。
  #{getCssVarName(color, secondary, light, hover)}: rgba(var(#{getCssVarName(light, blue, 1)}),1); // 浅版次要颜色悬浮态
  #{getCssVarName(color, secondary, light, active)}: rgba(var(#{getCssVarName(light, blue, 2)}),1); // 浅版次要颜色激活态

  // 第三颜色
  #{getCssVarName(color, tertiary)}: rgba(var(#{getCssVarName(grey, 5)}),1); // 第三颜色，可以在页面上多次使用
  #{getCssVarName(color, tertiary, text)}: rgba(var(#{getCssVarName(white)}), 1); // 第三颜色文字色，和背景色形成对比
  #{getCssVarName(color, tertiary, hover)}: rgba(var(#{getCssVarName(grey, 6)}),1); // 第三颜色悬浮态
  #{getCssVarName(color, tertiary, hover, text)}: rgba(var(#{getCssVarName(white)}), 1); // 第三颜色文字色，和背景色形成对比
  #{getCssVarName(color, tertiary, active)}: rgba(var(#{getCssVarName(grey, 7)}),1); // 第三颜色激活态
  #{getCssVarName(color, tertiary, active, text)}: rgba(var(#{getCssVarName(white)}), 1); // 第三颜色文字色，和背景色形成对比
  #{getCssVarName(color, tertiary, light, default)}: rgba(var(#{getCssVarName(grey, 0)}),1); // 浅版第三颜色（多用于背景），可以在页面上多次使用
  #{getCssVarName(color, tertiary, light, hover)}: rgba(var(#{getCssVarName(grey, 1)}),1); // 浅版第三颜色悬浮态
  #{getCssVarName(color, tertiary, light, active)}: rgba(var(#{getCssVarName(grey, 2)}),1); // 浅版第三颜色激活态

  // 信息色
  #{getCssVarName(color, info)}: rgba(var(#{getCssVarName(blue, 5)}),1); // 信息色, 通常用于表达客观、中立信息
  #{getCssVarName(color, info, text)}: rgba(var(#{getCssVarName(white)}), 1); // 信息颜色文字色，和背景色形成对比
  #{getCssVarName(color, info, hover)}: rgba(var(#{getCssVarName(blue, 6)}),1); // 信息色悬浮态
  #{getCssVarName(color, info, hover, text)}: rgba(var(#{getCssVarName(white)}), 1); // 信息颜色文字色，和背景色形成对比
  #{getCssVarName(color, info, active)}: rgba(var(#{getCssVarName(blue, 7)}),1); // 信息色激活态
  #{getCssVarName(color, info, active, text)}: rgba(var(#{getCssVarName(white)}), 1); // 信息颜色文字色，和背景色形成对比
  #{getCssVarName(color, info, disabled)}: rgba(var(#{getCssVarName(blue, 2)}),1); // 信息色禁用态
  #{getCssVarName(color, info, disabled, text)}: rgba(var(#{getCssVarName(white)}), 1); // 信息颜色文字色，和背景色形成对比
  #{getCssVarName(color, info, light, default)}: rgba(var(#{getCssVarName(blue, 0)}),1); // 浅版信息色（多用于背景），通常用于表达客观、中立信息
  #{getCssVarName(color, info, light, hover)}: rgba(var(#{getCssVarName(blue, 1)}),1); // 浅版信息色悬浮态
  #{getCssVarName(color, info, light, active)}: rgba(var(#{getCssVarName(blue, 2)}),1); // 浅版信息色激活态

  // 成功色
  #{getCssVarName(color, success)}: rgba(var(#{getCssVarName(green, 5)}),1); // 成功色，表示安全、成功、开启的状态
  #{getCssVarName(color, success, text)}: rgba(var(#{getCssVarName(white)}), 1); // 成功颜色文字色，和背景色形成对比
  #{getCssVarName(color, success, hover)}: rgba(var(#{getCssVarName(green, 6)}),1); // 成功色悬浮态
  #{getCssVarName(color, success, hover, text)}: rgba(var(#{getCssVarName(white)}), 1); // 成功颜色文字色，和背景色形成对比
  #{getCssVarName(color, success, active)}: rgba(var(#{getCssVarName(green, 7)}),1); // 成功色激活态
  #{getCssVarName(color, success, active, text)}: rgba(var(#{getCssVarName(white)}), 1); // 成功颜色文字色，和背景色形成对比
  #{getCssVarName(color, success, disabled)}: rgba(var(#{getCssVarName(green, 2)}),1); // 成功色禁用态
  #{getCssVarName(color, success, disabled, text)}: rgba(var(#{getCssVarName(white)}), 1); // 成功颜色文字色，和背景色形成对比
  #{getCssVarName(color, success, light, default)}: rgba(var(#{getCssVarName(green, 0)}),1); // 浅版成功色（多用于背景），表示安全、成功、开启的状态
  #{getCssVarName(color, success, light, hover)}: rgba(var(#{getCssVarName(green, 1)}),1); // 浅版成功色悬浮态
  #{getCssVarName(color, success, light, active)}: rgba(var(#{getCssVarName(green, 2)}),1); // 浅版成功色激活态

  // 危险色
  #{getCssVarName(color, danger)}: rgba(var(#{getCssVarName(red, 5)}),1); // 危险色，表示危险的操作、或需要特别注意的危险信息
  #{getCssVarName(color, danger, text)}: rgba(var(#{getCssVarName(white)}), 1); // 危险颜色文字色，和背景色形成对比
  #{getCssVarName(color, danger, hover)}: rgba(var(#{getCssVarName(red, 6)}),1); // 危险色悬浮态
  #{getCssVarName(color, danger, hover, text)}: rgba(var(#{getCssVarName(white)}), 1); // 危险颜色文字色，和背景色形成对比
  #{getCssVarName(color, danger, active)}: rgba(var(#{getCssVarName(red, 7)}),1); // 危险色激活态
  #{getCssVarName(color, danger, active, text)}: rgba(var(#{getCssVarName(white)}), 1); // 危险颜色文字色，和背景色形成对比
  #{getCssVarName(color, danger, light, default)}: rgba(var(#{getCssVarName(red, 0)}),1); // 浅版危险色（多用于背景），表示危险的操作、或需要特别注意的危险信息
  #{getCssVarName(color, danger, light, hover)}: rgba(var(#{getCssVarName(red, 1)}),1); // 浅版危险色悬浮态
  #{getCssVarName(color, danger, light, active)}: rgba(var(#{getCssVarName(red, 2)}),1); // 浅版危险色激活态

  // 警示色
  #{getCssVarName(color, warning)}: rgba(var(#{getCssVarName(orange, 5)}),1); // 警示色，表示警告、不安全的状态
  #{getCssVarName(color, warning, text)}: rgba(var(#{getCssVarName(white)}), 1); // 警告颜色文字色，和背景色形成对比
  #{getCssVarName(color, warning, hover)}: rgba(var(#{getCssVarName(orange, 6)}),1); // 警示色悬浮态
  #{getCssVarName(color, warning, hover, text)}: rgba(var(#{getCssVarName(white)}), 1); // 警告颜色文字色，和背景色形成对比
  #{getCssVarName(color, warning, active)}: rgba(var(#{getCssVarName(orange, 7)}),1); // 警示色激活态
  #{getCssVarName(color, warning, active, text)}: rgba(var(#{getCssVarName(white)}), 1); // 警告颜色文字色，和背景色形成对比
  #{getCssVarName(color, warning, light, default)}: rgba(var(#{getCssVarName(orange, 0)}),1); // 浅版警示色（多用于背景），表示警告、不安全的状态
  #{getCssVarName(color, warning, light, hover)}: rgba(var(#{getCssVarName(orange, 1)}),1); // 浅版警示色悬浮态
  #{getCssVarName(color, warning, light, active)}: rgba(var(#{getCssVarName(orange, 2)}),1); // 浅版警示色激活态

  // 边框
  #{getCssVarName(color, focus, border)}: rgba(var(#{getCssVarName(blue, 5)}),1); // 多用于边框激活态颜色

  // 禁用态
  #{getCssVarName(color, disabled, text)}: rgba(var(#{getCssVarName(grey, 9)}), 0.35); // 禁用态 - 文字
  #{getCssVarName(color, disabled, border)}: rgba(var(#{getCssVarName(grey, 1)}),1); // 禁用态 - 描边
  #{getCssVarName(color, disabled, bg)}: rgba(var(#{getCssVarName(grey, 1)}),1); // 禁用态 - 背景
  #{getCssVarName(color, disabled, fill)}: rgba(var(#{getCssVarName(grey, 8)}),0.04); // 禁用态 - 填充
  #{getCssVarName(color, shadow)}: rgba(var(#{getCssVarName(black)}),0.04); // 用于模拟描边的阴影颜色

  // 链接颜色
  #{getCssVarName(color, link)}: rgba(var(#{getCssVarName(blue, 5)}),1); // 链接颜色
  #{getCssVarName(color, link, hover)}: rgba(var(#{getCssVarName(blue, 6)}),1); // 链接颜色 - 悬浮态
  #{getCssVarName(color, link, active)}: rgba(var(#{getCssVarName(blue, 7)}),1); // 链接颜色 - 激活态
  #{getCssVarName(color, link, visited)}: rgba(var(#{getCssVarName(blue, 5)}),1); // 链接颜色 - 已访问
  #{getCssVarName(color, border)}: rgba(var(#{getCssVarName(grey, 9)}),0.08); // 默认描边颜色
  #{getCssVarName(color, nav, bg)}: rgba(var(#{getCssVarName(white)}),1); // 导航背景色
  #{getCssVarName(color, overlay, bg)}: rgba(22 22 26 / 60%); // 蒙层背景色

  // 填充色
  #{getCssVarName(color, fill, 0)}: rgba(var(#{getCssVarName(grey, 8)}),0.05); // 填充色 - 默认态
  #{getCssVarName(color, fill, 1)}: rgba(var(#{getCssVarName(grey, 8)}),0.09); // 填充色 - 悬浮态
  #{getCssVarName(color, fill, 2)}: rgba(var(#{getCssVarName(grey, 8), }),0.13); // 填充色 - 激活态

  // 背景色
  #{getCssVarName(color, bg, 0)}: rgba(var(#{getCssVarName(white)}),1); // 背景色 - 最下层（底部页面）
  #{getCssVarName(color, bg, 1)}: rgba(var(#{getCssVarName(white)}),1); // 背景色 - 次下层（页面中需要提升的内容）
  #{getCssVarName(color, bg, 2)}: rgba(var(#{getCssVarName(white)}),1); // 背景色 - 中间层（模态等容器）
  #{getCssVarName(color, bg, 3)}: rgba(var(#{getCssVarName(white)}),1); // 背景色 - 次上层（通知，Toast等）
  #{getCssVarName(color, bg, 4)}: rgba(var(#{getCssVarName(white)}),1); // 背景色 - 最上层（特殊）

  // 文本/图标颜色
  #{getCssVarName(color, text, 0)}: rgba(var(#{getCssVarName(grey, 9)}),1); // 文本/图标颜色 - 最主要
  #{getCssVarName(color, text, 1)}: rgba(var(#{getCssVarName(grey, 9)}),0.8); // 文本/图标颜色 - 稍次要
  #{getCssVarName(color, text, 2)}: rgba(var(#{getCssVarName(grey, 9)}),0.62); // 文本/图标颜色 - 次要
  #{getCssVarName(color, text, 3)}: rgba(var(#{getCssVarName(grey, 9)}),0.35); // 文本/图标颜色 - 最次要
  #{getCssVarName(shadow, elevated)}:
    0 0 1px rgba(0 0 0 / 30%),
    0 4px 14px rgba(0 0 0 / 10%); // 用于toast, modal, popover等需要提升层级的界面元素

  // 圆角
  #{getCssVarName(border, radius, extra, small)}: 3px; // 超小圆角，用于 checkbox 内圆角
  #{getCssVarName(border, radius, small)}: 3px; // 小圆角, 用于 button、tag、tabs 等大多数组件, 比较常用
  #{getCssVarName(border, radius, medium)}: 6px; // 中圆角, 用于 dropdown、scrollist、transfer 等菜单类组件
  #{getCssVarName(border, radius, large)}: 12px; // 大圆角, 用于 modal
  #{getCssVarName(border, radius, circle)}: 50%; // 全圆角, 用于 avatar, badge 等组件
  #{getCssVarName(border, radius, full)}: 9999px; // 用于创建全尺寸圆角，如胶囊标签等

  // 高亮
  #{getCssVarName(color, highlight, bg)}: rgba(var(#{getCssVarName(yellow, 4)}),1); // 高亮文本背景色
  #{getCssVarName(color, highlight)}: rgba(var(#{getCssVarName(black)}),1); // 高亮文本色
}
